import { AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } from '@ant-design/icons';
import { Alert, Checkbox,Col } from 'antd';
import React, { useState } from 'react';
import { Link, connect } from 'umi';
import classnames from 'classnames';
import styles from './style.less';
import LoginFrom from './components/Login';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginFrom;

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);

const Login = props => {
  const { userAndlogin = {}, submitting } = props;
  const { status, type: loginType } = userAndlogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [type, setType] = useState('account');

  const handleSubmit = values => {
    const { dispatch } = props;
    dispatch({
      type: 'userAndlogin/login',
      payload: { ...values, type },
    });
  };

  return (
    <div className={styles.login}>
      <Col xl={6} md={8} xs={8} className={classnames(styles.main,styles.loginText)} >
        <div className={styles.textMain}>
            <div className={styles.title}>SuperCube</div>
            <p className={styles.desc}>多数据可视化展示的SuperCube平台</p>
            <p className={styles.desc}>一起解构数字世界，碰撞科技创新思想</p>
          </div>
      </Col>
      <Col xl={6} md={8} xs={8} className={classnames(styles.main,styles.loginForm)}>
      <LoginFrom activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
          <h2 style={{textAlign:'center'}}>SuperCube</h2>
          {status === 'error' && loginType === 'account' && !submitting && (
            <LoginMessage content="账户或密码错误" />
          )}

          <UserName
            name="username"
            placeholder="用户名"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <Password
            name="password"
            placeholder="密码"
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        <Submit loading={submitting}>登录</Submit>
      </LoginFrom>
      </Col>
    </div>
  );
};

export default connect(({ userAndlogin, loading }) => ({
  userAndlogin,
  submitting: loading.effects['userAndlogin/login'],
}))(Login);
